<template>
	<view class="content" v-if="pageShow==1">
			<view class="card-box" v-show="VulnTotalNodeShow">
				<div class="main-box" @click="slowDownPermission()">
					<view class="main-title">
						{{VulnTotalName}}
					</view>
				</div>
				<view class="main-card">
					<view class="main-card-row1">
						<view class="" @click="openVulnExternaPage('externalTotal')">
							<span>{{VulnTotalData.externalTotal}}</span>
							<span>公网漏洞总数</span>
						</view>
						<view class="division-line"></view>
						<view class="" @click="openVulnExternaPage('internalTotal')">
							<span>{{VulnTotalData.internalTotal}}</span>
							<span>内网漏洞总数</span>
						</view>
						
					</view>
					<view class="main-card-row2">
						<view class="" @click="openVulnExternaPage('externalLevel1')">
							<span style="color: #E3BD23;">{{VulnTotalData.externalLevel1Toall}}</span>
							<span>中危</span>
						</view>
						<view class="" @click="openVulnExternaPage('externalLevel2')">
							<span style="color: #FF4D4D;">{{VulnTotalData.externalLevel2total}}</span>
							<span>高危</span>
						</view>
						<view class="division-line"></view>
						<view class="" @click="openVulnExternaPage('internalLevel')">
							<span style="color: #E3BD23;">{{VulnTotalData.internalLevelTotal}}</span>
							<span>中危</span>
						</view>
						<view class="" @click="openVulnExternaPage('internalLeve2')">
							<span style="color: #FF4D4D;">{{VulnTotalData.internalLeve2Total}}</span>
							<span>高危</span>
						</view>
					</view>
				</view>
			</view>
			<view class="card-box" v-show="DeptVulnDetailsShow">
				<div class="main-box" @click="slowDownPermission()">
					<view class="main-title">
						{{DeptVulnDetailsName}}
					</view>
				</div>
				<view class="main-card">
						<view class="btn-group">
							<view class="btn" :class="{'btn-select': btnFlag === '1'}" @click="handleBtnClick('1')">
								公网 {{ExternalNum}}
							</view>
							<view class="btn" :class="{'btn-select': btnFlag === '2'}" @click="handleBtnClick('2')">
								内网 {{InternalNum}}
							</view>
						</view>					
						<view class="card" v-for="(item, index) in DeptVulnDetailsDataNode1" :key="'new'+index" v-show="btnFlag === '1'">
							<view class="dept-name">
								<img  style="width: 64rpx; margin-right: 20rpx;" src="@/static/deptIcon1.png" alt="" />
								<view class="dept-content">
									<view class="dept-title" style="color:#303133;">
										{{item.depName}}
									</view>
									<view class="dept-details">
										漏洞总数：
										<span style="color: #1B9CFF;" @click="openVulnExternaPage('depTotal1',item.depId)">{{item.depTotal}}</span>
										<span @click="openVulnExternaPage('DepExternalLeve2',item.depId)">
											（高：
											<span style="color: #FF4D4D;">{{item.leve2}}</span>
										</span>
										<span @click="openVulnExternaPage('DepExternalLeve1',item.depId)">
											中：
											<span style="color: #F37A00;">{{item.leve1}}</span>
										    ）
										</span>
									</view>
								</view>
							</view>
						</view>
						<view class="card" v-for="(item, index) in DeptVulnDetailsDataNode2" :key="index" v-show="btnFlag === '2'">
							<view class="dept-name">
								<img  style="width: 64rpx; margin-right: 30rpx;" src="@/static/deptIcon3.png" alt="" />
								<view class="dept-content">
									<view class="dept-title" style="color:#303133;">
										{{item.depName}}
									</view>
									<view class="dept-details">
										漏洞总数：
										<span style="color: #1B9CFF;"  @click="openVulnExternaPage('depTotal2',item.depId)">{{item.depTotal}}</span>
										<span @click="openVulnExternaPage('DepInternalLeve2',item.depId)">
											（高：
											<span style="color: #FF4D4D;">{{item.leve2}}</span>
										</span>
										<span @click="openVulnExternaPage('DepInternalLeve1',item.depId)">
											中：
											<span style="color: #F37A00;">{{item.leve1}}</span>
										    ）
										</span>
									</view>
								</view>
							</view>
						</view>
				</view>
			</view>
			<view class="card-box" v-show="DepIdVulnAssetsShow">
				<view class="main-title">
					{{DepIdVulnAssetsName}}
				</view>
				<view class="card-title">
					公网
				</view>
				<view class="card">
					<view class="card-content">
						<view class="chart-box">
							<view style="width: 50%; height: 200px" @click="openVulnExternaPage('DepIdVulnExternalAll')"><l-echart ref="chartRef1" ></l-echart>
							</view>
							<view class="chart-tips" style="width: 50%; height: 200px">
								<span style="margin-bottom: 30rpx;" @click="openVulnExternaPage('DepIdVulnExternalLevel2')"><span>高风险</span> <span class="tips-num"
										style="color: #FF3A03;">{{DepIdVulnAssetsData.externalLevel2total}}</span></span>
								<span style="margin-bottom: 30rpx;" @click="openVulnExternaPage('DepIdVulnExternalLevel1')"><span>中风险</span> <span class="tips-num" style="color: #F37A00;">{{DepIdVulnAssetsData.externalLevel1Toall}}</span></span>
								<span @click="openVulnExternaPage('DepIdVulnExternalLevel0')"><span>低风险</span> <span class="tips-num" style="color: #E3BD23;">{{DepIdVulnAssetsData.externalLeve01Toall}}</span></span>
							</view>
						</view>
					</view>
				</view>
				<view class="card-title">
					内网
				</view>
				<view class="card">
					<view class="card-content">
						<view class="chart-box">
							<view style="width: 50%; height: 200px" @click="openVulnExternaPage('DepIdVulnInternalAll')"><l-echart ref="chartRef2" ></l-echart>
							</view>
							<view class="chart-tips" style="width: 50%; height: 200px">
								<span style="margin-bottom: 30rpx;" @click="openVulnExternaPage('DepIdVulnInternalLevel2')"><span>高风险</span> <span class="tips-num"
										style="color: #FF3A03;">{{DepIdVulnAssetsData.internalLeve2Total}}</span></span>
								<span style="margin-bottom: 30rpx;" @click="openVulnExternaPage('DepIdVulnInternalLevel1')"><span>中风险</span> <span class="tips-num" style="color: #F37A00;">{{DepIdVulnAssetsData.internalLevelTotal}}</span></span>
								<span @click="openVulnExternaPage('DepIdVulnInternalLevel0')"><span>低风险</span> <span class="tips-num" style="color: #E3BD23;">{{DepIdVulnAssetsData.internalLeve0Total}}</span></span>
							</view>
						</view>
					</view>
				</view>	
			</view>				
			<view class="card-box" v-show="PersonalVulnAssetsShow">
				<view class="main-title">
					{{PersonalVulnAssetsName}}
				</view>
				<view class="card-title">
					公网
				</view>
				<view class="card">
					<view class="card-content">
						<view class="chart-box">
							<view style="width: 50%; height: 200px" @click="openVulnExternaPage('PersonalVulnExternalAll')"><l-echart ref="chartRef3"></l-echart>
							</view>
							<view class="chart-tips" style="width: 50%; height: 200px">
								<span style="margin-bottom: 30rpx;" @click="openVulnExternaPage('PersonalVulnExternalLevel2')"><span>高风险</span> <span class="tips-num"
										style="color: #FF3A03;">{{PersonalVulnAssetsData.externalLevel2total}}</span></span>
								<span style="margin-bottom: 30rpx;" @click="openVulnExternaPage('PersonalVulnExternalLevel1')"><span>中风险</span> <span class="tips-num" style="color: #F37A00;">{{PersonalVulnAssetsData.externalLevel1Toall}}</span></span>
								<span @click="openVulnExternaPage('PersonalVulnExternalLevel0')"><span>低风险</span> <span class="tips-num" style="color: #E3BD23;">{{PersonalVulnAssetsData.externalLeve01Toall}}</span></span>
							</view>
						</view>
					</view>
				</view>
				<view class="card-title">
					内网
				</view>
				<view class="card">
					<view class="card-content">
						<view class="chart-box">
							<view style="width: 50%; height: 200px" @click="openVulnExternaPage('PersonalVulnInternalAll')"><l-echart ref="chartRef4"></l-echart>
							</view>
							<view class="chart-tips" style="width: 50%; height: 200px">
								<span style="margin-bottom: 30rpx;" @click="openVulnExternaPage('PersonalVulnInternalLevel2')"><span>高风险</span> <span class="tips-num"
										style="color: #FF3A03;">{{PersonalVulnAssetsData.internalLeve2Total}}</span></span>
								<span style="margin-bottom: 30rpx;" @click="openVulnExternaPage('PersonalVulnInternalLevel1')"><span>中风险</span> <span class="tips-num" style="color: #F37A00;">{{PersonalVulnAssetsData.internalLevelTotal}}</span></span>
								<span @click="openVulnExternaPage('PersonalVulnInternalLevel0')"><span>低风险</span> <span class="tips-num" style="color: #E3BD23;">{{PersonalVulnAssetsData.internalLeve0Total}}</span></span>
							</view>
						</view>
					</view>
				</view>	
			</view>	
	</view>
	<u-loading v-else-if="pageShow==2" class="loading" size="80" mode="flower" :show="loading" color="primar"></u-loading>
	<u-empty  v-else-if="pageShow==0" style="margin-top: 100px;" iconSize='200' textSize='18' mode="data" icon="@/static/empty.png" text='暂无数据'></u-empty>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	export default {
		// props: ["permissionData"],
		data() {
			return {
				VulnTotalName:'',
				DepIdVulnAssetsName:'',
				DeptVulnDetailsName:'',
				PersonalVulnAssetsName:'',
				VulnTotalNodeShow:false,
				DeptVulnDetailsShow:false,
				DepIdVulnAssetsShow:false,
				PersonalVulnAssetsShow:false,
				VulnTotalData:{},
				DeptVulnDetailsData:[],
				DepIdVulnAssetsData:[],
				PersonalVulnAssetsData:[],
				DeptVulnDetailsDataNode1: [],
				DeptVulnDetailsDataNode2: [],
				ExternalNum:0,
				InternalNum:0,
				pageShow:0,				
				btnFlag: '1',
				option1: {},
				option2: {},
				option3: {},
				option4: {},
				title: '数据统计',
			};
		},
		created () {
		  this.getpermission()		  
		},
		activated() {
			this.changeTitle('数据统计')
		},
		// 组件能被调用必须是组件的节点已经被渲染到页面上
		methods: {
			changeTitle(newTitle) {
			  this.title = newTitle;
			  uni.setNavigationBarTitle({
				title: this.title
			  });
			},
			// 获取当前用户标签权限
			async getpermission() {
				let that=this
				let data = await this.$api.getpermission(); //已经封装好的api
				if (data.Code == 200) {
					// this.loading = false
					this.permissionData=data.Data
					that.permissionData.forEach((e, index) => {
						  if (e.PermissionName == '漏洞') {
							that.pageShow=true
						  }
						  if(e.Children&&e.Children.length>0){
							  e.Children.forEach((item, index) => {
								  if(item.PermissionName=="管理员-漏洞汇总"){									  
										  that.VulnTotalName=item.PermissionName
										  that.getVulnTotal()
								  }else if(item.PermissionName=="管理员-部门漏洞明细"){
										  that.DeptVulnDetailsName=item.PermissionName
										  that.getDepVulnTotal()
								  }else if(item.PermissionName=="部门管理员-部门漏洞"){
										  that.DepIdVulnAssetsName=item.PermissionName
										  that.DepIdVulnAssetsShow=true	
                                          that.getDepIdVulnTotal()
								  }else if(item.PermissionName=="个人-个人漏洞汇总"){
										  that.PersonalVulnAssetsName=item.PermissionName
										  that.PersonalVulnAssetsShow=true
										  that.getAccVulnTotal()

								  }
							  })							  
						  }
						})	
				} else {
					uni.showToast({
						title: '请求失败!',
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			handleBtnClick(flag) {
				this.btnFlag = flag
			},
			openVulnExternaPage(type,id) {//获取管理员-漏洞明细
				this.$router.push({
				   path:'/pages/VulnExternaPage/index',query:{
				   type: type,
				   DeptID:id
				   }});
			},
			async getVulnTotal() {//获取管理员-漏洞汇总
			    this.loading=true
				let data = await this.$api.getVulnTotal(); //已经封装好的api
				if (data.Code == 200) {
					// this.loading = false
					this.VulnTotalData=data.Data
					this.VulnTotalNodeShow=true	
					this.pageShow=1
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			async getDepVulnTotal() {// 获取管理员-部门漏洞汇总
			    this.loading=true
				let data = await this.$api.getDepVulnTotal(); //已经封装好的api
				if (data.Code == 200) {
					// this.loading = false
					this.DeptVulnDetailsData=data.Data
					if(this.DeptVulnDetailsData&&this.DeptVulnDetailsData.length>0){
						this.DeptVulnDetailsData.forEach((e, index) => {
							if(e.type==1){//1是公网 2是内网
							    this.ExternalNum=data.Data[index].total
								this.DeptVulnDetailsDataNode1=data.Data[index].data
							}else{
								this.InternalNum=data.Data[index].total
								this.DeptVulnDetailsDataNode2=data.Data[index].data
							}
						})
					}
					this.DeptVulnDetailsShow=true	
					this.pageShow=1
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			async getDepIdVulnTotal() {//获取部门-漏洞汇总
			    this.loading=true
				let data = await this.$api.getDepIdVulnTotal(); //已经封装好的api
				if (data.Code == 200) {
					// this.loading = false
					
					this.DepIdVulnAssetsData=data.Data
					// chart 图表实例不能存在data里
					this.getOption({
						data3: this.DepIdVulnAssetsData.externalLeve01Toall,
						data2: this.DepIdVulnAssetsData.externalLevel1Toall,
						data1: this.DepIdVulnAssetsData.externalLevel2total,
						total: this.DepIdVulnAssetsData.externalTotal,
					}, 1)
					const chart1 = await this.$refs.chartRef1.init(echarts);
					chart1.setOption(this.option1)
					this.getOption({
						data3: this.DepIdVulnAssetsData.internalLeve0Total,
						data2: this.DepIdVulnAssetsData.internalLevelTotal,
						data1: this.DepIdVulnAssetsData.internalLeve2Total,
						total: this.DepIdVulnAssetsData.internalTotal,
					}, 2)
					const chart2 = await this.$refs.chartRef2.init(echarts);
					chart2.setOption(this.option2)
					this.pageShow=1
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},			
			async getAccVulnTotal() {//获取个人-漏洞汇总
			    this.loading=true
				let data = await this.$api.getAccVulnTotal(); //已经封装好的api
				if (data.Code == 200) {
					// this.loading = false
					
					this.PersonalVulnAssetsData=data.Data
				// chart 图表实例不能存在data里
				this.getOption({
					data3:this.PersonalVulnAssetsData.externalLeve01Toall,
					data2:this.PersonalVulnAssetsData.externalLevel1Toall,
					data1:this.PersonalVulnAssetsData.externalLevel2total,
					total:this.PersonalVulnAssetsData.externalTotal,
				}, 3)
				const chart3 = await this.$refs.chartRef3.init(echarts);
				chart3.setOption(this.option3)
				this.getOption({
					data3:this.PersonalVulnAssetsData.internalLeve0Total,
					data2:this.PersonalVulnAssetsData.internalLevelTotal,
					data1:this.PersonalVulnAssetsData.internalLeve2Total,
					total:this.PersonalVulnAssetsData.internalTotal,
				}, 4)
				const chart4 = await this.$refs.chartRef4.init(echarts);
				chart4.setOption(this.option4)
					this.pageShow=1
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			// async init() {
			// 	// chart 图表实例不能存在data里
			// 	this.getOption({
			// 		data1: 6,
			// 		data2: 3,
			// 		total: 25,
			// 	}, 3)
			// 	const chart3 = await this.$refs.chartRef3.init(echarts);
			// 	chart3.setOption(this.option3)
			// 	this.getOption({
			// 		data1: 0,
			// 		data2: 0,
			// 		total: 0,
			// 	}, 4)
			// 	const chart4 = await this.$refs.chartRef4.init(echarts);
			// 	chart4.setOption(this.option4)
			// },
			getOption(data, type) {
				let seriesData = data.total ? [{
						value: data.data1,
						name: '高风险'
					},
					{
						value: data.data2,
						name: '中风险'
					},
					{
						value: data.data3,
						name: '低风险'
					},
				] : null
				this['option' + type] = {
					color: ['#FF3A03', '#F37A00', '#E3BD23'],
					series: [{
							type: 'pie',
							connectNulls: false,
							radius: ['60%', '75%'],
							label: {
								show: false
							},
							data: seriesData
						},
						{
							type: 'pie',
							radius: ['60%', '75%'],
							label: {
								normal: {
									show: true,
									position: 'center',
									formatter: (params) => {
										return [
											`{a|${this.$utils.commafy(data.total)}}`,
											`{b|${type === 1||type === 3 ? '公网' : '内网'}漏洞总数}`
										].join('\n');
									},
									rich: {
										a: {
											fontSize: 24,
											color: '#5F6475',
											fontWeight: 'bold',
											padding: [0, 0, 5, 0]
										},
										b: {
											fontSize: 12,
											color: '#555'
										}
									}
								}
							},
							data: [{
								value: 1,
								itemStyle: {
									color: 'transparent'
								}
							}]
						}
					]
			
				}
			}
		}
	}
</script>

<style lang="scss" scoped>

.main-card-row1 {
	border-radius: 16rpx 16rpx 0 0;
	background: linear-gradient(270deg, #1078DE 0%, #5FBAF2 100%);
	display: flex;
	justify-content: space-evenly;
	
	&>view {
		flex: 1;
		padding: 37rpx 0 31rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		&>span:first-child {
			font-weight: 700;
			font-size: 50rpx;
			margin-bottom: 5rpx;
		}
		&>span:last-child {
			font-size: 24rpx;
		}
	}
}
.main-card-row2 {
	border-radius: 0 0 16rpx 16rpx;
	box-shadow: 0rpx 30rpx 20rpx 1rpx rgba(51,149,231,0.26);
	background: linear-gradient(270deg, #1078DE 0%, #43A2EA 100%);
	display: flex;
	justify-content: space-evenly;
	&>view {
		flex: 1;
		 overflow: hidden;
		  text-overflow: ellipsis;
		  white-space: nowrap;
		padding: 28rpx 0 39rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		&>span:first-child {
			font-weight: 700;
			margin-bottom: 5rpx;
		}
		&>span:last-child {
			font-size: 24rpx;
			color: rgba(255, 255, 255, .8);
		}
	}
}


.dept-name {
	display: flex;
	align-items: center;
	padding: 25rpx 0 25rpx 25rpx;
}
.dept-content {
	// margin-left: 30rpx;
	.dept-title {
		font-size: 34rpx;
		margin-bottom: 5rpx;
	}
	.dept-details {
		color: #A7ABBB;
		font-size: 16px;
		    width: 100%;
		&>span {
			// margin-right: 20rpx;
		}
	}
}
.card-box {
    margin: 12px;
    background: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0px 0px 3px 1px rgba(36, 111, 161, 0.06);
}
.card{
    border-radius: 10px;
    margin: 6px;
    background-color: #fff;
    box-shadow: 0px 0px 3px 1px rgba(36, 111, 161, 0.06);
}
.card-title{
    font-size: 20px;
    padding: 10px !important;
    border-bottom: 0 !important;
    color: #999 !important;
}
.u-loading-flower{
	margin: 10px auto;
	display: block;
}
.main-card{
	margin: 10px 0;
}
.main-box{
	display: flex;
	justify-content: space-between;
}
.chart-tips {
	&>span {
		display: flex;
		align-items: center;
	}
}

.tips-num {
	margin-left: 20rpx !important;
}

.chart-tips {
	margin-left: 30rpx!important;
}
.dept-details> span:first-child {
    font-weight: 700;
}
.dept-details>span> span:first-child {
    font-weight: 700;
}
.dept-details> span:nth-child(2) {
   margin-right: 15rpx;
}

</style>